<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
  {
    style: {
      navigationStyle: 'custom',
      navigationBarTitleText: '可提现',
      "enablePullDownRefresh": false,
    },
  }
  </route>
<template>
  <view class="bg-[#f4f4f4] min-h-[100vh]">
    <grayHeader title="可提现">
      <view class="flex flex-col h-[308rpx] rounded-sm bg-white mx-[20rpx] mt-5 pt-[66rpx] pb-4 text-center ">
        <view class="text-[#9A9A9A] text-[22rpx]">可提现</view>
        <view class="text-base text-[38rpx] font-bold mt-[26rpx]">{{ withdrawConfig?.able_withdraw }}</view>
        <view class="flex items-center mt-auto ml-4" v-if="withdrawConfig && withdrawConfig.weekdays">
          <image src="/static/images/tips.png" class="w-[30rpx] h-[30rpx]"></image>
          <text class="text-base text-[30rpx] ml-[14rpx]">每周{{ withdrawConfig.weekdays.join('、') }}可提现佣金</text>
        </view>
      </view>
    </grayHeader>

    <view class="mt-4 mx-[20rpx]">
      <view class="pb-5 bg-white rounded-sm px-4 mt-[154rpx]">
        <view class="text-[#0D0D0D] text-sm py-4">提现方式</view>
        <view class="flex gap-x-4">
          <wd-button v-for="(item, index) in state.withdrawTypeList" :plain="index !== state.curType" :round="false"
            :block="true" custom-class="flex-1" :key="index" @click="handleToggleType(index)">{{
              item.name
            }}</wd-button>
        </view>

        <view class="mt-5">
          <bankForm v-if="state.curType === 1" ref="formRef" />
          <wxForm v-else ref="formRef" />
          <!-- <selectBank v-model="state.account" /> -->
        </view>

      </view>

      <view class="mt-[20rpx] pb-[20rpx] px-[20rpx] bg-white rounded-sm">
        <view class="text-[#0D0D0D] text-sm py-4 mx-[10rpx]">提现金额</view>
        <wd-input type="digit" use-prefix-slot v-model="state.value" placeholder=" ">
          <template #prefix>
            <text class="text-[#0D0D0D] text-[60rpx]">￥</text>
          </template>
        </wd-input>
        <view class="mt-[20rpx] text-[#737373] text-sm">可提现金额￥{{ withdrawConfig?.able_withdraw }}</view>
      </view>

      <view class="mt-[144rpx] mx-4">
        <wd-button :round="false" block @click="handleSubmit">确认</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import grayHeader from "./components/gray-header.vue";
import bankForm from "./components/bank-form.vue";
import wxForm from "./components/wx-form.vue";
// import selectBank from "./components/select-bank.vue";
import useRequest from "@/hooks/useRequest";
import { fetchWithdrawConfig, fetchWithdraw } from "@/service/withdraw";
import { showToast } from "@/utils/uni";
defineOptions({
  options: {
    styleIsolation: 'shared',
  }
})

const formRef = ref();

const { data: withdrawConfig } = useRequest(fetchWithdrawConfig, { immediate: true });

const state = ref({
  value: "",
  curType: 0,
  withdrawTypeList: [
    {
      name: "提现到微信",
      value: 4
    },
    {
      name: "提现到银行卡",
      value: 3
    }
  ]
})

const withdrawParams = computed(() => {
  const params = {
    type: state.value.withdrawTypeList[state.value.curType].value,
    money: state.value.value,
  }
  return params
});

function handleToggleType(i) {
  state.value.curType = i;
}

async function handleSubmit() {
  let formData = await formRef.value.sumbit();
  if (!formData) return;
  const money = state.value.value;
  const { max_withdraw, min_withdraw } = withdrawConfig.value
  if (!money) return showToast("请输入提现金额");
  if (money > withdrawConfig.able_withdraw) return showToast("提现金额不能大于可提现金额");
  if (money < min_withdraw) return showToast(`提现金额不能小于${min_withdraw}元`);
  if (money > max_withdraw) return showToast(`提现金额不能大于${max_withdraw}元`);



  fetchWithdraw({
    ...formData,
    ...withdrawParams.value
  }).then(res => {
    showToast(res.msg, uni.navigateBack);
  });
}

</script>

<style lang="scss" scoped>
::v-deep .wd-button.is-plain {
  border-color: #E2E2E2 !important;
}
</style>
